const mobile = {
    DOWN: "touchstart",
    UP: "touchend",
    MOVE: "touchmove",
};
const pc = {
    DOWN: "mousedown",
    UP: "mouseup",
    MOVE: "mousemove",
};
function isMobile() {
    const mobileReg =
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i;
    return window.navigator.userAgent.match(mobileReg); // 移动端
}
const { DOWN, UP, MOVE } = isMobile() ? mobile : pc;
export class Canvas {
    constructor(id) {
        this.parent = document.querySelector(id)
        this.canvas = null
        this.ctx = null
        this.status = 'up'
        this.init()
    }
    init() {
        this.canvas = document.createElement('canvas')
        this.canvas.setAttribute('width', this.parent.style.width)
        this.canvas.setAttribute('height', this.parent.style.height)
        this.canvas.style = 'border: 1px dashed #999;'
        this.ctx = this.canvas.getContext("2d");
        this.parent.appendChild(this.canvas)
        this.canvas.addEventListener(DOWN, this.event(DOWN));
        this.canvas.addEventListener(UP, this.event(UP));
        this.canvas.addEventListener(MOVE, this.event(MOVE));
    }
    event(name) {
        return e => {
            let tocuch = e.targetTouches && e.targetTouches[0] || {}
            let x = isMobile() ? tocuch.pageX:e.offsetX; 
            let y = isMobile() ? tocuch.pageY:e.offsetY; 
            if (name === DOWN) {
                this.status = "down";
            }
            if (name === UP) {
                this.status = "up";
            }
            if(this.status === "down" && name === DOWN) {
                console.log(e)
                this.ctx.save();
                this.ctx.beginPath();
                this.ctx.strokeStyle = '#000';
                this.ctx.lineWidth = 2;
                this.ctx.moveTo(x, y);
            }
            if(this.status === "down" && name === MOVE) {
                this.ctx.lineTo(x, y);
                this.ctx.stroke();
            }
            if(this.status === "up" && name === UP) {
                this.ctx.closePath()
            }
        }
    }
    file(filename = "canvas") {
        const dataURL = this.canvas.toDataURL("image/png", 1);
        const arr = dataURL.split(",");
        const mime = arr[0].match(/:(.*?);/)[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    }
    download(name='签名', compress = 1) {
        const dataURL = this.canvas.toDataURL("image/png", compress);
        const a = document.createElement("a");
        const event = new MouseEvent("click");
        a.download = name;
        a.href = dataURL;
        a.dispatchEvent(event);
        return this;
    }
}

/**
 * demo示例
 */
// const qwe = new Canvas('#CANVAS')
// document.querySelector('button').onclick = function() {
//     qwe.download()
// }